<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    <!--
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    -->
</head>

<body>
    <div id="app">
        {{messageMain}}，{{ageMain}}
        <!--在调用子组件的时候需要事先声明绑定的属性，写法：:(父组件的属性)='绑定的属性'。-->
        <!--标签不能大写，用-来代替大写。-->
        <parent :message-super='messageMain' :agesuper='ageMain'></parent>
    </div>
    <!--父组件模板-->
    <template id="super">
        <h3>{{parentmsg}}，{{parentAge}}-->我收到了{{messageSuper}}，{{agesuper}}</h3>
        <!--标签不能大写，用-来代替大写。-->
        <son :messagesub='parentmsg' v-bind:agesub='parentAge'></son>
    </template>
    <!--子组件模板-->
    <template id="subordinate">
        <h3>{{sonmsg}}，{{sonAge}}-->我收到了{{messagesub}}，{{agesub}}</h3>
    </template>
    <script>
        new Vue({
            el: '#app',
            data: {
                messageMain: '主页面消息',
                ageMain:100,
            },
            //父组件
            components: {
                //给super模板取别名parent
                'parent': {
                    template: '#super',
                    data() {
                        return {
                            parentmsg: "父组件的消息",
                            parentAge:10,
                        }
                    },
                    //需要申明子组件哪些属性绑定了父组件的属性
                    props: ['message-super','agesuper'],
                    //子组件
                    components: {
                        //给subordinate模板取别名son
                        'son': {
                            template: '#subordinate',
                            data() {
                                return {
                                    sonmsg: "子组件的消息",
                                    sonAge:1,
                                }
                            },
                            //需要申明子组件哪些属性绑定了父组件的属性
                            props: {
                                messagesub:String,//messagesub:''
                                agesub:Number//agesub:''
                            },
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>